<template>
	<view class="content">
		<view class="family"><view class="all">全部成员</view></view>	
		
		<view class="join">
			<uni-icons class="van-join" color="#5664f0" type="personadd" size="30"></uni-icons>
			<text class="text1">邀请加入</text>
		</view>
		
		<view class="user">
			<img src="/static/people.png" alt="">
			<text class="text2">李墨</text>
			<text class="text3">数学老师</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="text4">批量操作</view>
		<uni-icons class="van-join2" color="#5664f0" type="personadd" size="30"></uni-icons>
		
		<view class="friend">
			<img src="/static/xiaozhan.png" alt="">
			<text class="text2">肖小战</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/liuyifei.png" alt="">
			<text class="text2">刘非菲</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/yangmi.png" alt="">
			<text class="text2">杨幂</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/liyifeng.png" alt="">
			<text class="text2">小小猪</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/xiaozhan.png" alt="">
			<text class="text2">胖子</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/liuyifei.png" alt="">
			<text class="text2">美女</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/liyifeng.png" alt="">
			<text class="text2">备胎</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		<view class="friend">
			<img src="/static/xiaozhan.png" alt="">
			<text class="text2">姬霓太美</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	/* 全部成员 */
.family {
	width: 750rpx;
	height: 100rpx;
	background-color: white;
	position: relative;
	margin-bottom: 50rpx;
}
.all {
	margin-left: 30rpx;
	color: #7a88f9;
	width: 130rpx;
	padding-bottom: 10rpx;
	font-weight: 800;
	border-bottom: solid 5rpx #7a88f9;
	position: absolute;
	top: 20rpx;
}
/* 邀请加入 */
.join {
	height: 100rpx;
	background-color: white;
	position: relative;
	border-bottom: solid 1rpx #f1f1f1;
}
.van-join {
	position: absolute;
	top: 20rpx;
	left: 30rpx;
}
.text1 {
	color: #5664f0;
	position: absolute;
	top: 30rpx;
	left: 120rpx;
}
/* 用户 */
.user {
	height: 100rpx;
	background-color: white;
	position: relative;
	border-bottom: solid 1rpx #f1f1f1;
	/* margin-bottom: 200rpx; */
}
img {
	width: 80rpx;
	position: absolute;
	top: 10rpx;
	left: 30rpx;
}
.text2 {
	position: absolute;
	top: 30rpx;
	left: 150rpx;	
}
.text3 {
	position: absolute;
	left: 260rpx;
	top: 30rpx;
	color: #777777;
}
.arrowright {
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
}
/* 批量操作 */
.text4 {
	font-weight: 800;
	color: #5461df;
	margin-left: 600rpx;
	margin-top: 0rpx;
	margin-bottom: 120rpx;
}
.van-join2 {
	position: absolute;
	top: 430rpx;
	left: 30rpx;
}
/* 好友 */
.friend {
	height: 100rpx;
	background-color: white;
	position: relative;
	border-bottom: solid 1rpx #f1f1f1;
}
</style>
